<template>
	<view class="container">
		<view class="display-type margin-b-xs" style="height: 300rpx;" v-if="userInfo&&userInfo.id">
			<view @click="uploadLogoFn" class="flex-wrp flex-jun" style="height: 160rpx;border-bottom: 2rpx solid #F8F8F8;">
				<view class="titet">头像</view>
				<view class="flex-wrp flex-j-c" style="gap: 20rpx;">
					<view class="iconBox flex-wrp">
						<image v-if="!logo" class="logoPic" :src="userInfo.avatar?userInfo.avatar:require('@/static/logo.png')"></image>
						<image v-if="logo" class="logoPic" :src="logo" mode="aspectFill"></image>
					</view>
					<view class="arrowR">
						<image :src="imgHead+'card/photo/20250529/1748500127333.png'"></image>
					</view>
				</view>
			</view>
			<view class="flex-wrp flex-jun" style="height: 120rpx;">
				<view class="titet">姓名</view>
				<view class="inputBox flex-wrp" style="width: auto;">
					<input class="input1" type="text" v-model="userInfo.nickName" maxlength="8" placeholder="请输入8个字以内的昵称" />
				</view>
			</view>
		</view>
		<view class="card-btn" v-if="userInfo&&userInfo.id">
			<view class="add-card" @click="sureMessageFn">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgHead: 'https://qr-card.oss-accelerate.aliyuncs.com/',
				userInfo:{},
				logo:'',
			}
		},
		onLoad(e) {
			this.getUserInfoFn()
		},
		onShow() {
			
		},
		methods: {
			getUserInfoFn(){
				this.$http('/api/user/getUserInfo').then(res=>{
					this.userInfo = res.result
				})
			},
			uploadLogoFn(){
				uni.chooseImage({
					count: 1,
					success: async (res) => {
						// #ifndef MP-WEIXIN
						uni.uploadFile({
							url: this.$baseUrl + '/api/userUpload',
							filePath: res.tempFilePaths[0],
							header:{ Authorization : 'Bearer '+uni.getStorageSync('token')},
							name: 'file',
							success: (res1)=> {
								this.logo = JSON.parse(res1.data).result
								console.log(this.logo)
							}
						});
						// #endif
						// #ifdef MP-WEIXIN
						wx.cropImage({
							src: res.tempFilePaths[0], // 图片路径
							cropScale: '1:1', // 裁剪比例
							success: (res2) => {
								uni.uploadFile({
									url: this.$baseUrl + '/api/userUpload',
									filePath: res2.tempFilePath,
									header:{ Authorization : 'Bearer '+uni.getStorageSync('token')},
									name: 'file',
									success: (res1)=> {
										this.logo = JSON.parse(res1.data).result
										console.log(this.logo)
									}
								});
							},
							fail: err=>{
								uni.uploadFile({
									url: this.$baseUrl + '/api/userUpload',
									filePath: res.tempFilePaths[0],
									header:{ Authorization : 'Bearer '+uni.getStorageSync('token')},
									name: 'file',
									success: (res1)=> {
										this.logo = JSON.parse(res1.data).result
										console.log(this.logo)
									}
								});
							}
						})
						// #endif
						
					}
				});
			},
			async sureMessageFn(){
				if(!this.userInfo.nickName){
					uni.showToast({
						title:'请填写昵称',
						icon:'none'
					})
					return
				}
				uni.showLoading({
					mask:'true'
				})
				this.$http('/api/user/setUserInfo',{
					nickName:this.userInfo.nickName,
					avatar:this.logo?this.logo:this.userInfo.avatar
				},'POST').then(res=>{
					uni.navigateBack().then(res=>{
						uni.showToast({
							title:'编辑成功',
							icon:'none'
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F9F9F9;
		min-height: 100vh;
		padding: 20rpx 24rpx;
	}
	image {
		width: 100%;
		height: 100%;
	}
	.display-type{
		padding: 0 30rpx;
		height: 116rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		.titet{
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
			height: 32rpx;
		}
		.arrowR{
			width: 10rpx;
			height: 20rpx;
			display: flex;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.inputBox{
			width: 260rpx;
			height: 28rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #ABAAAF;
			line-height: 28rpx;
			text-align: right;
		}
		.iconBox{
			width: 108rpx;
			height: 108rpx;
			border-radius: 88rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 88rpx;
			}
		}
		.input1 {
			color: #333333;
			font-size: 28rpx;
			width: 100%;
		}
	}
	.card-btn{
		width: 100%;
		background: #FFFFFF;
		padding: 20rpx 20rpx 60rpx;
		
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		.add-card{
			height: 94rpx;
			background: #005CFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 94rpx;
			z-index: 99;
		}
	}
</style>
